/**
 * Created by huotaol on 2017/5/3.
 */

import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle.js";
import AlphabetListView from "react-native-alphabetlistview";
import ModuleCommonHeader from "../../main/module/ModuleCommonHeader";
import Series from "./Series";
import {Actions} from "react-native-router-flux";
import * as BuyCarAction from "../../redux/action/BuyCar";

const BRAND_VIEW_WIDTH = 350;

class Brand extends Component {
    static propTypes = {
        needRequestDetailKind: PropTypes.bool,
        onSelected: PropTypes.func,
    };

    static defaultProps = {
        needRequestDetailKind: false,
    };

    constructor(props, context) {
        super(props, context);

        this.state = {
            selectBrand: '',
        };
        console.log('brand onSelected ' + this.props.onSelected);
    }

    componentDidMount() {
    }


    render() {
        return (
            <View style={{flex: 1,}}>
                <ModuleCommonHeader title='品牌选择'/>
                <View style={{flex: 1, backgroundColor: '#fffbd5',}}>
                    <AlphabetListView
                        data={this.props.brandData}
                        cell={Cell}
                        renderHeader={() => {
                            return <Header onClick={() => {
                                this.props.onSelected('', '', '');
                                Actions.pop();
                            }
                            }/>;
                        }}
                        cellProps={{selectBrand: this.state.selectBrand}}
                        onCellSelect={(item) => {
                            this.setState({selectBrand: item});
                        }}
                        sectionListItem={SectionItem}
                        sectionHeader={SectionHeader}
                        cellHeight={CustomStyle.getActualSizeInVertical(88)}
                        sectionHeaderHeight={CustomStyle.getActualSizeInVertical(44)}
                    />
                    <Series
                        style={{
                            backgroundColor: 'white',
                            position: 'absolute',
                            left: CustomStyle.getActualSizeInHorizontal(BRAND_VIEW_WIDTH + 10),
                            top: 0,
                            width: CustomStyle.getActualSizeInHorizontal(348),
                            height: CustomStyle.screenHeight - CustomStyle.navTotalHeight,
                        }}
                        brand={this.state.selectBrand}
                        onSelected={this.props.onSelected}
                        needRequestDetailKind={this.props.needRequestDetailKind}/>
                </View>
            </View>
        );
    }
}
class Header extends Component {
    static propTypes = {
        onClick: PropTypes.func,
    };

    render() {
        return (
            <BrandItem item='不限品牌' image={require('../../../img/buyCar/all.png')} onClick={(item) => {
                this.props.onClick();
            }}/>
        );
    }
}


class SectionHeader extends Component {
    render() {
        // inline styles used for brevity, use a stylesheet when possible
        const textStyle = {
            color: '#8c7a44',
            fontWeight: '700',
            fontSize: CustomStyle.getActualFontSize(24),
        };

        const viewStyle = {
            backgroundColor: '#fff8d5',
            paddingLeft: CustomStyle.getActualSizeInHorizontal(30),
            height: CustomStyle.getActualSizeInVertical(44),
            justifyContent: 'center',
        };
        return (
            <View style={viewStyle}>
                <Text style={textStyle}>{this.props.title}</Text>
            </View>
        );
    }
}

class SectionItem extends Component {
    render() {
        let title = this.props.title;
        title = title.substring(0, 1);
        return (
            <Text style={{color: '#f00'}}>{title}</Text>
        );
    }
}

class Cell extends Component {
    render() {
        return (
            <BrandItem {...this.props} onClick={(item) => {
                this.props.onSelect(item);
            }}/>
        );
    }
}

class BrandItem extends Component {
    static propTypes = {
        text: PropTypes.string,
        click: PropTypes.func,
        image: PropTypes.any,
        selected: PropTypes.bool,
        onClick: PropTypes.func,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        const item = this.props.item;
        const selected = this.props.selectBrand === item;
        return (
            <TouchableOpacity
                onPress={() => {
                    this.props.onClick(item);
                }}
                style={[styles.itemContainer, {
                    paddingLeft: CustomStyle.getActualSizeInHorizontal(50),
                    paddingRight: CustomStyle.getActualSizeInHorizontal(50),
                    backgroundColor: selected ? '#fafafa' : '#FFFEFA',
                }]}>
                <Image
                    resizeMode={'contain'}
                    source={this.props.image}
                    style={{
                        width: CustomStyle.getActualSizeInHorizontal(48),
                        height: CustomStyle.getActualSizeInVertical(48),
                    }}/>
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: selected ? '#ffc000' : '#4a3d18',
                    }]}>{item}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        height: CustomStyle.getActualSizeInVertical(88),
        width: CustomStyle.getActualSizeInHorizontal(BRAND_VIEW_WIDTH),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomColor: 'rgba(0,0,0,0.2)',
        borderBottomWidth: CustomStyle.getActualSizeInVertical(1),
    },
    drawer: {
        shadowColor: '#000000',
        shadowOpacity: 0.8,
        shadowRadius: 3,
        backgroundColor: 'red'
    },
    main: {paddingLeft: 3},
});

const mapStateToProps = (state) => {
    const {brand} = state;
    return {
        brandData: brand.data,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Brand);